<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="750px">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="就业方向" prop="dirId">
        <el-select v-model="formData.dirId" placeholder="请选择就业方向" filterable clearable @change="handleDirChange" style="width: 100%">
          <el-option v-for="dir in dirOptions" :key="dir.id" :label="dir.name" :value="dir.id" />
        </el-select>
      </el-form-item>
      <!-- 隐藏的就业方向名称 -->
      <el-form-item prop="dirName" v-show="false">
        <el-input v-model="formData.dirName" hidden />
      </el-form-item>
      <!-- 隐藏的就业方向ID -->
      <el-form-item prop="dirId" v-show="false">
        <el-input v-model="formData.dirId" hidden />
      </el-form-item>
      <el-form-item label="对口院校" prop="schoolId">
        <el-select
          v-model="formData.schoolId"
          placeholder="请先选择就业方向"
          filterable
          clearable
          :disabled="!formData.dirId"
          @change="handleSchoolChange"
          style="width: 100%"
        >
          <el-option 
            v-for="school in schoolOptions" 
            :key="school.value" 
            :label="school.label" 
            :value="school.value" 
          />
        </el-select>
      </el-form-item>
      <!-- 隐藏的学校ID -->
      <el-form-item prop="schoolId" v-show="false">
        <el-input v-model="formData.schoolId" hidden />
      </el-form-item>
      <!-- 隐藏的学校名称 -->
      <el-form-item prop="schoolName" v-show="false">
        <el-input v-model="formData.schoolName" hidden />
      </el-form-item>
      <el-form-item label="所在省份" prop="name">
        <el-input v-model="formData.name" placeholder="自动匹配省份" readonly />
      </el-form-item>
      <el-form-item label="文章内容" prop="content">
        <Editor v-model="formData.content" height="150px" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio
            v-for="dict in getIntDictOptions(DICT_TYPE.KF_TYPE)"
            :key="dict.value"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="formData.sort" placeholder="请输入排序" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { EmploymentEssayApi, EmploymentEssayVO } from '@/api/kf/employmentessay'
import { SchoolApi } from '@/api/kf/school'
import { EmploymentDirApi } from '@/api/kf/employmentdir'

// 就业方向选项数据
interface DirOption {
  id: number
  name: string
  [key: string]: any
}

// 就业方向选项
const dirOptions = ref<DirOption[]>([])

/** 从后端获取就业方向数据 */
const fetchDirOptions = async () => {
  try {
    console.log('开始获取就业方向数据...')
    // 添加状态过滤，只获取已发布的就业方向（status=1）
    const res = await EmploymentDirApi.getEmploymentDirPage()
    console.log('就业方向原始响应:', res)
    
    // 直接处理响应数据，它可能是一个包含 list 和 total 的对象
    if (res && res.list) {
      // 按照sort字段排序，排序值越小越靠前
      dirOptions.value = res.list.sort((a, b) => {
        // 如果sort为null，则排在后面
        if (a.sort === null && b.sort === null) return 0
        if (a.sort === null) return 1
        if (b.sort === null) return -1
        return a.sort - b.sort
      })
      
      console.log('就业方向选项数据已设置:', dirOptions.value)
      
      if (dirOptions.value.length === 0) {
        console.warn('没有找到就业方向数据')
        message.warning('没有找到就业方向数据')
      }
    } else if (res && res.code === 0 && res.data && res.data.list) {
      // 兼容标准响应格式
      dirOptions.value = res.data.list.sort((a, b) => {
        if (a.sort === null && b.sort === null) return 0
        if (a.sort === null) return 1
        if (b.sort === null) return -1
        return a.sort - b.sort
      })
      
      console.log('就业方向选项数据已设置 (标准格式):', dirOptions.value)
      
      if (dirOptions.value.length === 0) {
        console.warn('没有找到就业方向数据')
        message.warning('没有找到就业方向数据')
      }
    } else {
      console.error('获取就业方向数据失败:', res)
      message.error('获取就业方向数据失败')
    }
  } catch (error) {
    console.error('获取就业方向数据失败:', error)
    message.error('获取就业方向数据失败')
  }
}

// 处理就业方向选择变化
const handleDirChange = async (value) => {
  if (!value) {
    // 清空就业方向相关字段
    formData.value.dirId = undefined
    formData.value.dirName = undefined
    // 清空对口院校相关字段
    formData.value.schoolId = undefined
    formData.value.schoolName = undefined
    // 清空学校选项
    schoolOptions.value = []
    return
  }
  
  // 根据选择的ID设置名称
  const selectedDir = dirOptions.value.find(dir => dir.id === value)
  if (selectedDir) {
    // 设置就业方向ID和名称
    formData.value.dirId = selectedDir.id
    formData.value.dirName = selectedDir.name
    console.log('设置就业方向ID:', selectedDir.id, '名称:', selectedDir.name)
    
    try {
      // 从API获取该就业方向的详细信息，包括对口院校
      console.log('开始获取就业方向详细信息，ID:', value)
      const dirDetail = await EmploymentDirApi.getEmploymentDir(value)
      console.log('就业方向详细信息:', dirDetail)
      
      if (dirDetail && dirDetail.schools && dirDetail.schoolIds) {
        // 获取院校名称和ID数组
        const schoolNames = dirDetail.schools.split(',')
        const schoolIds = dirDetail.schoolIds.split(',')
        
        // 清空现有选项，准备构建新的学校选项
        schoolOptions.value = []
        
        // 直接构建学校选项列表
        for (let i = 0; i < schoolNames.length; i++) {
          const schoolName = schoolNames[i].trim()
          const schoolId = schoolIds[i].trim()
          
          schoolOptions.value.push({
            value: schoolId,
            label: schoolName
          })
        }
        
        console.log('已构建对口院校选项:', schoolOptions.value)
      } else {
        console.warn('就业方向没有关联的对口院校')
        message.warning('该就业方向没有关联的对口院校')
        schoolOptions.value = []
      }
    } catch (error) {
      console.error('获取就业方向详细信息失败:', error)
      message.error('获取对口院校失败')
    }
  }
}

/** 就业文章 表单 */
defineOptions({ name: 'EmploymentEssayForm' })

// 学校选项数据
const schoolOptions = ref<{value: string | number, label: string}[]>([])

// 定义级联选择器选项的类型
interface CascaderOption {
  value: string | number
  label: string
  children?: CascaderOption[]
}

// 院校选项数据
const options = ref<CascaderOption[]>([])

/** 从后端获取院校数据 */
const fetchSchoolOptions = async () => {
  try {
    console.log('开始获取院校数据...')
    const res = await SchoolApi.getAllSchools()
    console.log('原始响应:', res)
    
    // 判断响应是否为数组，直接使用
    if (Array.isArray(res)) {
      options.value = res
      console.log('院校选项数据已设置 (数组格式):', options.value)
      
      if (options.value.length === 0) {
        console.warn('没有找到院校数据')
        message.warning('没有找到院校数据')
      }
    }
    // 判断是否为标准响应格式
    else if (res && res.code === 0 && res.data) {
      options.value = res.data
      console.log('院校选项数据已设置 (标准格式):', options.value)
      
      if (options.value.length === 0) {
        console.warn('没有找到院校数据')
        message.warning('没有找到院校数据')
      }
    } 
    // 其他情况判断为错误
    else {
      console.error('获取院校数据失败:', res)
      message.error('获取院校数据失败')
    }
  } catch (error) {
    console.error('获取院校数据失败:', error)
    message.error('获取院校数据失败')
  }
}

// 处理院校选择变化
const handleSchoolChange = async (value) => {
  if (!value) {
    formData.value.schoolId = undefined
    formData.value.schoolName = undefined
    formData.value.name = undefined
    return
  }
  
  // 从选项中找到选中的学校
  const selectedSchool = schoolOptions.value.find(school => school.value.toString() === value.toString())
  if (selectedSchool) {
    // 设置学校ID和名称
    formData.value.schoolId = selectedSchool.value
    formData.value.schoolName = selectedSchool.label
    console.log('设置学校ID:', selectedSchool.value, '名称:', selectedSchool.label)
    
    try {
      // 从API获取院校详细信息，包括省份
      console.log('开始获取院校详细信息，ID:', value)
      const schoolDetail = await SchoolApi.getSchool(value)
      console.log('院校详细信息:', schoolDetail)
      
      if (schoolDetail && schoolDetail.provinceName) {
        // 从返回值中提取省份信息
        formData.value.name = schoolDetail.provinceName
        console.log('从院校API获取省份:', schoolDetail.provinceName)
      } else {
        // 如果没有省份信息，设置为空
        formData.value.name = undefined
        console.warn('院校没有省份信息')
      }
    } catch (error) {
      console.error('获取院校详细信息失败:', error)
      message.error('获取院校省份信息失败')
      // 如果获取失败，不设置省份
      formData.value.name = undefined
    }
  }
}

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
// 定义表单数据类型
interface FormDataType {
  id?: number
  dirName?: string
  dirId?: number
  name?: string
  schoolId?: string | number
  schoolName?: string
  content?: string
  status?: number
  sort?: number
  selectedSchool?: (string | number)[]
}

const formData = ref<FormDataType>({
  id: undefined,
  dirName: undefined,
  dirId: undefined,
  name: undefined,
  schoolId: undefined,
  schoolName: undefined,
  content: undefined,
  status: getIntDictOptions(DICT_TYPE.KF_TYPE).find(item => item.label === '已发布')?.value,
  sort: undefined,
  selectedSchool: undefined
})
const formRules = reactive({
  dirId: [
    { required: true, message: '请选择就业方向', trigger: 'change' }
  ],
  schoolId: [
    { required: true, message: '请选择对口院校', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入文章内容', trigger: 'blur' }
  ]
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  
  // 获取院校数据
  await fetchSchoolOptions()
  
  // 获取就业方向数据
  await fetchDirOptions()
  
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      const data = await EmploymentEssayApi.getEmploymentEssay(id)
      formData.value = data
      
      // 如果有已选择的学校，设置级联选择器的值
      if (data.schoolId && data.schoolName) {
        // 尝试找到对应的院校
        for (const province of options.value) {
          if (province.children) {
            const school = province.children.find(s => s.value.toString() === data.schoolId.toString())
            if (school) {
              formData.value.selectedSchool = [province.value, school.value]
              break
            }
          }
        }
      }
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as EmploymentEssayVO
    if (formType.value === 'create') {
      await EmploymentEssayApi.createEmploymentEssay(data)
      message.success(t('common.createSuccess'))
    } else {
      await EmploymentEssayApi.updateEmploymentEssay(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    dirName: undefined,
    dirId: undefined,
    name: undefined,
    schoolId: undefined,
    schoolName: undefined,
    content: undefined,
    status: getIntDictOptions(DICT_TYPE.KF_TYPE).find(item => item.label === '已发布')?.value,
    sort: undefined,
    selectedSchool: undefined
  }
  formRef.value?.resetFields()
}
</script>
